/**
 * Copyright ©
 * 
 * @author: zw
 * @date: 2021-11-06 
 */


import React, { FC, ReactElement, useCallback, useState, useEffect } from 'react';
import Input from './Input'
import List from './List'
import { ITodo } from './typings';

 const TodoList: FC = (props): ReactElement => {
  const [ todoList, setTodoList ] = useState<ITodo[]>([]);
  useEffect(() => {
    console.log(todoList);
  }, [todoList]);

  const addTodo = useCallback((todo: ITodo) => {
      console.log(todo);
      setTodoList(todoList => [...todoList, todo]);
    }, [])
  return(
    <div className="">
      <Input addTodo={ addTodo } todoList={ todoList }></Input>
      <List></List>
    </div>
  )
}

export default TodoList


